<template>
	<view class="content">
		<!-- tab栏切换动态改变激活样式 -->
		<view class="nav">
			<view class="nav-list" v-for="(item,index) in tabList" :key="item.id" @tap="changeAct(item)">
				<!-- 激活样式名字-->
				<view :class="[act==index?'name':'']">
					{{item.name}}
				</view>
				<!-- 名字下面的横线 -->
				<view :class="[act==index?'line':'']">
				</view>
			</view>

		</view>
		<!-- 内容的改变 -->
		<swiper class="swiper-box-list" :current="act" @change="swiperChange" :style="{ height: swiperHeight }">
			<swiper-item class="swiper-topic-list" key="0">
				<!-- .one容器 实际高度 会赋值给swiper作为高度 -->
				<view class="one">
					<view class="center">
						<u-row class="select">
							<u-col span="3" style="flex-direction: row;">
								<u-picker class="start" :show="show" :columns="columns" @cancel="cancelHandler"
									@confirm="confirmHandler"></u-picker>
								<p @click="show = true;isPick=0">{{startCity}}</p>
								<image class="dropdown-icon" @click="show = true;isPick=0"
									src="../../static/tu/rentalcars_downarrow.png" mode="widthFix"></image>
							</u-col>
							<u-col span="9">
								<view class="searchItem">
									<input type="text" class="editAddress" value="深圳大厦自助点" @input="onInput" />
									<p class="editDetail" v-show="msgShow">该门店仅支持自助取车</p>
								</view>
							</u-col>
						</u-row>
						<u-line length="90%" style="margin-left: 5% ;"></u-line>
						<u-row class="select">
							<u-col span="3" style="flex-direction: row;">
								<u-picker class="end" :show="show" :columns="columns" @cancel="cancelHandler"
									@confirm="confirmHandler"></u-picker>
								<p @click="show = true;isPick=1">{{endCity}}</p>
								<image class="dropdown-icon" @click="show = true;isPick=1"
									src="../../static/tu/rentalcars_downarrow.png" mode="widthFix"></image>
							</u-col>
							<u-col span="6">
								<view class="searchItem">
									<input type="text" class="editAddress" value="深圳金融大厦网点" />
								</view>
							</u-col>
							<u-col span="3">
								<view class="pickGroup">
									<p class="pickUp" :style="{backgroundImage:`url(${backgroundUp})`}"
										@click="pick(0)">上门
									</p>
									<p class="pickIn" :style="{backgroundImage:`url(${backgroundIn})`}"
										@click="pick(1)">到店
									</p>
								</view>
							</u-col>
						</u-row>
						<u-line length="90%" style="margin-left: 5%;"></u-line>
						<view class="dateSelect">
							<view class="dateTimeLeft" @click="timeShow = true;isPick=2">
								<u-datetime-picker :show="timeShow" v-model="dateTime" mode="datetime"
									:formatter="formatter" @cancel="cancelHandler"
									@confirm="confirmHandler"></u-datetime-picker>
								<p>{{startDate}}</p>
								<p>{{startTime}}</p>
							</view>
							<view class="dateTimeCenter">
								<p>{{day}}天</p>
								<image src="../../static/tu/rentalcars_rightarrow.png"></image>
							</view>
							<view class="dateTimeRight" @click="timeShow = true;isPick=3">
								<u-datetime-picker :show="timeShow" v-model="dateTime" mode="datetime"
									:formatter="formatter" @cancel="cancelHandler"
									@confirm="confirmHandler"></u-datetime-picker>
								<p>{{endDate}}</p>
								<p>{{endTime}}</p>
							</view>
						</view>
						<u-button class="btnPick" @click="pickCar">立即选车</u-button>
					</view>
					<view class="more">
						<h4>顺风车推荐</h4>
						<view class="morePick">
							<!--							<p style="font-size: 25rpx;" @click="detail()">查看全部</p>-->
							<p style="font-size: 25rpx;" @tap="goFreeRide()">查看全部</p>
							<u-icon name="arrow-right" color="#939291" size="15"></u-icon>
						</view>
					</view>
					<carList :start-city="start_city" :end-city="end_city" :start-date="start_date"
						:end-date="end_date"></carList>
					<view style="height: 200rpx;"></view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-topic-list" key="1" style="height: 100%;">
				<p style="color: white;text-align: center;">分时租内容</p>
			</swiper-item>
			<swiper-item class="swiper-topic-list" key="2" style="height: 100%;">
				<p style="color: white;text-align: center;">长租内容</p>
			</swiper-item>
			<swiper-item class="swiper-topic-list" key="3" style="height: 100%;">
				<p style="color: white;text-align: center;">国际租车内容</p>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import carList from '../zuche/carList.vue'
	export default {
		components: { //注册组件
			carList
		},
		data() {
			return {
				act: 0, // tab默认激活样式是第一个
				swiperHeight: 0 + 'px',
				tabList: [{
						id: 0,
						name: '国内租车'
					},
					{
						id: 1,
						name: '分时租'
					},
					{
						id: 2,
						name: '长租'
					},
					{
						id: 3,
						name: '国际租车'
					}
				],
				startCity: "深圳",
				endCity: "上海",
				isPick: 0,
				show: false,
				columns: [
					["深圳", "上海", "北京", "广州", "长沙"]
				],
				msgShow: true,
				backgroundUp: null,
				backgroundIn: "../../static/tu/rentalcars_pick_yes.png",
				timeShow: false,
				dateTime: Number(new Date()),
				startDate: "2019-08-10",
				startTime: "08:00",
				endDate: "2019-08-11",
				endTime: "08:00",
				day: 1,
				d1: Number(new Date()),
				d2: Number(new Date()),
				start_city: "",
				end_city: "",
				start_date: "",
				end_date: "",
			}
		},
		onLoad() {
			// 动态设置Swiper高度
			this.setH();
			this.start_city = this.startCity;
			this.end_city = this.endCity;
			this.start_date = this.startDate;
			this.end_date = this.endDate;
		},
		methods: {
			changeAct(item) {
				// 激活样式是当前点击的对应下标--list中对应id
				this.act = item.id;
				// 可以根据点击事件改变内容
				this.content = item
			},
			detail() {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/shouye/freeRide'
				})
			},
			confirmHandler(e) {
				console.log(this.isPick);
				if (this.isPick == 0) {
					this.startCity = e.value[0];
				} else if (this.isPick == 1) {
					this.endCity = e.value[0];
				} else if (this.isPick == 2) {
					// 处理时间戳
					const timeFormat = uni.$u.timeFormat;
					this.startDate = timeFormat(e.value, 'yyyy-mm-dd');
					this.startTime = timeFormat(e.value, 'hh:MM');
					this.d1 = Number(new Date(this.endDate));
					this.d2 = Number(new Date(this.startDate));
					this.day = parseInt(Math.abs(this.d1 - this.d2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数

				} else if (this.isPick == 3) {
					// 处理时间戳
					const timeFormat = uni.$u.timeFormat;
					this.endDate = timeFormat(e.value, 'yyyy-mm-dd');
					this.endTime = timeFormat(e.value, 'hh:MM');
					this.d1 = Number(new Date(this.endDate));
					this.d2 = Number(new Date(this.startDate));
					this.day = parseInt(Math.abs(this.d1 - this.d2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
				}
				this.show = false;
				this.timeShow = false;
			},
			cancelHandler() {
				this.show = false;
				this.timeShow = false;
			},
			onInput(e) {
				if (e.detail.value.length == 0) {
					this.msgShow = false
				} else {
					this.msgShow = true
				}
			},
			pick(index) {
				if (index == 0) {
					this.backgroundUp = "../../static/tu/rentalcars_pick_yes.png";
					this.backgroundIn = null;
				} else if (index == 1) {
					this.backgroundIn = "../../static/tu/rentalcars_pick_yes.png";
					this.backgroundUp = null;
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			swiperChange(e) {
				console.log(e.detail.current)
				this.changeAct(this.tabList[e.detail.current]);
				// let index = e.detail.current
				// this.swichMenu(index)
			},
			// 设置高度
			setH() {
				// 延时设置高度 -- 一定要延时，否则报错 - 300毫秒一般都够了
				setTimeout(() => {
					// uniapp自带方法 - 获取DOM的高度等信息
					// https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery
					// 节点查询
					const query = uni.createSelectorQuery().in(this)
					// 开始
					query.select('.one').boundingClientRect(data => {
						// console.log("【DOM尺寸信息】" + JSON.stringify(data))
						// 获取DOM的高度， 单位是像素
						let h = data.height
						// 补上单位
						h += 'px'
						// 实际高度赋值给swiper
						this.swiperHeight = h
						// console.log('【动态设置高度】', h)
					}).exec()
				}, 300)
			},
			goFreeRide() {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/shouye/freeRide'
				})
			},
			pickCar() {
				uni.showToast({
					title: "选车成功",
					icon: 'exception',
					duration: 850
				});
				this.start_city = this.startCity;
				this.end_city = this.endCity;
				this.start_date = this.startDate;
				this.end_date = this.endDate;
			}
		},
	}
</script>

<style>
	.content {
		background-image: url("../../static/tu/rental cars_top.png");
		width: 100%;
		height: 183px;
	}

	.nav {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 20rpx;
		color: white;
		letter-spacing: 2.14rpx;
		padding-top: 50rpx;
	}

	.nav-list {
		height: 100%;
		margin-top: 40rpx;
		opacity: .9;
	}

	.nav-list .name {
		height: 60%;
		color: white;
		font-size: 30rpx;
		font-weight: bold;
	}

	.nav-list .line {
		margin-top: 10rpx;
		margin-left: auto;
		margin-right: auto;
		width: 65rpx;
		height: 4rpx;
		background-color: white;
	}

	.center {
		width: 96%;
		/* padding: 0 3%; */
		height: 300px;
		background-color: #fefefe;
		border-radius: 24upx;
		/*  阴影 */
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
		margin: 40upx 2% 0upx 2%;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.dropdown-icon {
		width: 18rpx;
		height: 18rpx;
		margin-left: 15rpx;
		margin-right: 20rpx;
		margin-top: auto;
		margin-bottom: auto;
	}

	.select {
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		line-height: 100rpx;
	}

	.searchItem {
		margin-left: 30rpx;
	}

	.searchItem input {
		height: 50rpx;
	}

	.editDetail {
		width: 140px;
		font-size: 10px;
		color: #599bff;
		background-color: #dbf0ff;
		border-radius: 24upx;
		margin: 10rpx 0rpx;
		line-height: 35rpx;
		text-align: center;
	}

	.editAddress {
		font-size: 20rpx;
	}

	.pickGroup {
		display: flex;
		align-items: center;
		vertical-align: center;
		justify-content: center;
		flex-direction: row;
		height: 55rpx;
		width: 160rpx;
		background-image: url("../../static/tu/rentalcars_pick_no.png");
		background-size: 100% 55rpx;
		padding-left: 2rpx;
	}

	.pickIn {
		height: 55rpx;
		width: 80rpx;
		font-size: 20rpx;
		background-size: 100% 55rpx;
		display: flex;
		align-items: center;
		vertical-align: center;
		justify-content: center;
		flex-direction: row;
	}

	.pickUp {
		height: 55rpx;
		width: 80rpx;
		font-size: 20rpx;
		background-size: 100% 55rpx;
		display: flex;
		align-items: center;
		vertical-align: center;
		justify-content: center;
		flex-direction: row;
	}

	.dateSelect {
		display: flex;
		align-items: center;
		vertical-align: center;
		justify-content: center;
		flex-direction: row;
		width: 100%;
		height: 150rpx;
		margin-top: 10rpx;
	}

	.dateTimeLeft {
		display: flex;
		align-items: center;
		vertical-align: center;
		justify-content: center;
		flex-direction: column;
		width: 40%;
	}

	.dateTimeCenter {
		display: flex;
		align-items: center;
		vertical-align: center;
		justify-content: center;
		flex-direction: column;
		width: 20%;
	}

	.dateTimeCenter image {
		width: 150rpx;
		height: 15rpx;
	}

	.dateTimeRight {
		display: flex;
		align-items: center;
		vertical-align: center;
		justify-content: center;
		flex-direction: column;
		width: 40%;
	}

	.btnPick {
		width: 90%;
		color: white;
		background-image: url("../../static/tu/rental cars_btn1.png");
		background-size: 100% 100%;
		margin-top: 20rpx;
	}

	.more {
		height: 150rpx;
		display: flex;
		align-items: center;
		vertical-align: center;
		justify-content: center;
		flex-direction: row;
	}

	.more h4 {
		width: 50%;
		margin-left: 30rpx;
	}

	.morePick {
		width: 50%;
		flex-flow: row;
		justify-content: flex-end;
		display: flex;
		margin-right: 30rpx;
		color: #939291;
	}
</style>